<template>
  <div class="page ta-c">
    <div class="fs-h fw" style="padding-top: 80px;">设置昵称头像</div>
    <div class="pdt-xxl" style="margin-bottom:79px;">
      <div v-if="avatarUrl" class="avatar" :style="{backgroundImage:'url(' + avatarUrl + ')'}">
        <div class="photo" @tap="onChangeAvatar"><i class="fi icon-photo"></i></div>
      </div>
      <div v-else class="avatar">
        <i class="fi icon-yonghu"></i>
        <div class="photo" @tap="onChangeAvatar"><i class="fi icon-photo"></i></div>
      </div>
    </div>
    <div><input type="text" placeholder="名字" :value="nickName" @input="onUpdateName"></div>
    <div class="fix-bottom">
      <button class="ui btn primary" @tap="onSave">完成</button>
    </div>
    <file-upload :path="tmpPath" dir="avatars" :size="size" content-type="image/*" @success="onUploadSuccess"></file-upload>
    <page-common></page-common>
  </div>
</template>

<script>
import PageCommon from '@/components/page-common'
import { mapGetters, mapActions } from 'vuex'
import FileUpload from '@/components/file-upload'
import base from '@/mixins/base'

export default {
  mixins: [base],
  data () {
    return {
      size: 0,
      tmpPath: '',
      nickName: '',
      avatarUrl: ''
    }
  },
  components: {
    PageCommon,
    FileUpload
  },
  computed: {
    ...mapGetters([
      'loginer'
    ])
  },
  onLoad () {
    this.nickName = this.loginer.nickName
    this.avatarUrl = this.loginer.avatarUrl
  },
  methods: {
    ...mapActions([
      'updateLoginerAvatarUrl',
      'updateLoginerName',
      'saveBasicInfo',
    ]),
    onSave () {
      this.saveBasicInfo({nickName: this.nickName, avatarUrl: this.avatarUrl})
    },
    onUpdateName (e) {
      // this.updateLoginerName(e.target.value)
      this.nickName = e.target.value
    },
    onUploadSuccess (metarial) {
      this.avatarUrl = `https://ark-1256750454.cos.ap-shanghai.myqcloud.com/` + metarial.key
      // this.updateLoginerAvatarUrl(`https://ark-1256750454.cos.ap-shanghai.myqcloud.com/` + metarial.key)
    },
    onChangeAvatar () {
      let that = this
      wx.chooseImage({
        count: 1,
        success (res) {
          if (res.errMsg !== 'chooseImage:ok') return
          that.tmpPath = res.tempFilePaths[0]
        }
      })
    }
  },
  watch: {
    'loginer.nickName' (nv) {
      this.nickName = nv
    },
    'loginer.avatarUrl' (nv) {
      this.avatarUrl = nv
    }
  }
}
</script>

<style scoped lang="less">
@import '../../assets/less/var.less';
.page {
  background-color: @colorWhite;
  height: 100%;
  box-sizing: border-box;
}
.avatar {
  margin: 0 auto;
  width: 110px;
  height: 110px;
  background-color: white;
  border: 1px solid @colorLightGray;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 15px rgba(0,0,0,.1);
  background-position: center center;
  background-size: cover;
  i {
    font-size: 50px;
    line-height: 110px;
    color: @colorLightGray;
  }
}
.photo {
  width: 30px;
  height: 30px;
  background-color: @colorTeal;
  border-radius: 50%;
  position: absolute;
  right: 0;
  bottom: 0;
  i {
    line-height: 30px;
    font-size: 20px;
    color: white;
  }
}
input {
  border-bottom: 1px solid #cccccc;
  width: 160px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  padding-bottom: 15px;
}
</style>
